<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滑动标签</title>
	</head>
	<style>
		@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
		
		:root {
		  --primary-color: #185ee0;
		  --secondary-color: #e6eef9;
		}
		
		*,
		*:after,
		*:before {
		  box-sizing: border-box;
		}
		
		body {
		  font-family: "Inter", sans-serif;
		  background-color: rgba(230, 238, 249, 0.5);
		}
		
		.container {
		  position: absolute;
		  left: 0;
		  top: 0;
		  right: 0;
		  bottom: 0;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		}
		
		.tabs {
		  display: flex;
		  position: relative;
		  background-color: #fff;
		  box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
		  padding: 0.75rem;
		  border-radius: 99px;
		}
		
		.tabs * {
		  z-index: 2;
		}
		
		input[type=radio] {
		  display: none;
		}
		
		.tab {
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  height: 54px;
		  width: 200px;
		  font-size: 1.25rem;
		  font-weight: 500;
		  border-radius: 99px;
		  cursor: pointer;
		  transition: color 0.15s ease-in;
		}
		
		.notification {
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  width: 2rem;
		  height: 2rem;
		  margin-left: 0.75rem;
		  border-radius: 50%;
		  background-color: var(--secondary-color);
		  transition: 0.15s ease-in;
		}
		
		input[type=radio]:checked+label {
		  color: var(--primary-color);
		}
		
		input[type=radio]:checked+label>.notification {
		  background-color: var(--primary-color);
		  color: #fff;
		}
		
		input[id=radio-1]:checked~.glider {
		  transform: translateX(0);
		}
		
		input[id=radio-2]:checked~.glider {
		  transform: translateX(100%);
		}
		
		input[id=radio-3]:checked~.glider {
		  transform: translateX(200%);
		}
		
		.glider {
		  position: absolute;
		  display: flex;
		  height: 54px;
		  width: 200px;
		  background-color: var(--secondary-color);
		  z-index: 1;
		  border-radius: 99px;
		  transition: 0.25s ease-out;
		}
		
		@media (max-width: 700px) {
		  .tabs {
		    transform: scale(0.6);
		  }
		}
	</style>
	<body>
		<div class="container">
		    <div class="tabs">
		        <input type="radio" id="radio-1" name="tabs" checked />
		        <label class="tab" for="radio-1">Upcoming
		            <span class="notification">2</span></label>
		        <input type="radio" id="radio-2" name="tabs" />
		        <label class="tab" for="radio-2">Development</label>
		        <input type="radio" id="radio-3" name="tabs" />
		        <label class="tab" for="radio-3">Completed</label>
		        <span class="glider"></span>
		    </div>
		</div>
	</body>
</html>